<html>
<head>
<script type="text/javascript" src="Node.js"></script>
<script type="text/javascript" src="Edge.js"></script>
<script type="text/javascript">

var cons;
var canvas;
var context;
var abc;
var nodes = new Array();
var edges = new Array();

var mouseDown = 0;
var lastDragX = -1;
var lastDragY = -1;

var translationX = 0;
var translationY = 0;
var centerX;
var centerY;

var animationInterval;

function InitCanvas()
{
	cons = document.getElementById("console");
	canvas = document.getElementById("myCanvas");
	context = canvas.getContext("2d");
	
	context.canvas.width = document.width;
	context.canvas.height = document.height;
	
	context.strokeColor = "black";
	
	
	centerX = canvas.width/2;
	centerY = canvas.height/2;
	
	var node1 = new Node("IrDetFexSkrMgrCoeMsg");
	node1.setCenterPosition(100,100);
	node1.class = "Message";
	nodes.push(node1);
	
	var node2 = new Node("IrFrameManagerComp");
	node2.class = "Model";
	node2.setCenterPosition(400,100);
	nodes.push(node2);
	
	var node3 = new Node("SuperExec");
	node3.class = "Model";
	node3.setCenterPosition(250,350);
	nodes.push(node3);
	
	var edge = new Edge(node1, node2);
	edges.push(edge);
	
	edge = new Edge(node1,node3);
	edges.push(edge);
	
	canvas.onclick = function(e) {
		CanvasOnClick(e);
	}

	canvas.onmousedown = function(e) {
		mouseDown = 1;
	}
	
	canvas.onmouseup = function(e) {
		mouseDown = 0;
		lastDragX = -1;
		lastDragY = -1;
	}
	
	canvas.onmousemove = function(e) {
		if (mouseDown) 
			DragCanvas(e);
	}
	
	DrawCanvas();
}

function DragCanvas(e)
{
	mx = e.clientX-canvas.offsetLeft-translationX;
	my = e.clientY-canvas.offsetTop-translationY;
	if (lastDragX != -1 && lastDragY != -1)
	{
		dx = mx-lastDragX; dy = my-lastDragY;
		context.translate(dx,dy);
		DrawCanvas();
		translationX += dx;
		translationY += dy;

	}
	lastDragX = mx;
	lastDragY = my;
}

function DrawCanvas()
{
    // clear the canvas
	context.save();
	context.setTransform(1,0,0,1,0,0);
	context.clearRect(0,0,context.canvas.width, context.canvas.height);
	context.strokeRect(0,0,context.canvas.width,context.canvas.height);
	context.restore();
	
	for (var i=0; i < edges.length; i++)
		edges[i].draw();
	for (var i=0; i < nodes.length; i++)
		nodes[i].draw();
}

function CanvasOnClick(e)
{
	for (var i = 0; i < nodes.length; i++)
		nodes[i].onclick(e);
	
}

function AnimateTranslation(dx,dy,stopX,stopY)
{
	context.translate(dx,dy);
	DrawCanvas();
	translationX += dx;
	translationY += dy;
	
	if (Math.abs(translationX - stopX) <0.1 && Math.abs(translationY - stopY) < 0.1)
	{
		clearInterval(animationInterval);
	}
}

function AnimateCenteredAt(x,y)
{
	xx = x; 
	yy = y;

	dt = 20;

	halfw = context.canvas.width/2;
	halfh = context.canvas.height/2;
	dx = (halfw-x-translationX)/dt;
	dy = (halfh-y-translationY)/dt;
	animationInterval = setInterval("AnimateTranslation(dx,dy,halfw-xx,halfh-yy)", dt);
	/*
	tx = 400-x-translationX;
	ty = 300-y-translationY;
	context.translate(tx,ty);
	DrawCanvas();
	translationX += tx;
	translationY += ty;
	*/
}


</script>
</head>
<body onload="InitCanvas()">
	  <p id="console">console</p>
	  <canvas id="myCanvas" width="800" height="600"></canvas>
	  
</body>
</html>	
